<template>
  <div class="app-container">
    <div class="project-list-view">
      <el-table :data="tableData3"
                border
                style="width: 100%"
                :row-key="tableData3.pro_id">
        <el-table-column prop="id"
                         label="ID"
                         width="50">
        </el-table-column>
        <el-table-column prop="user_id"
                         label="交易用户ID">
        </el-table-column>
        <el-table-column prop="username"
                         label="交易用户昵称">
        </el-table-column>
        <el-table-column prop="type"
                         label="类型">
          <template slot-scope="scope">
            <el-tag size="mini" v-if="scope.row.type_id === '1'">{{ scope.row.type }}</el-tag>
            <el-tag size="mini" type="success" v-else-if="scope.row.type_id === '2'">{{ scope.row.type }}</el-tag>
            <el-tag size="mini" type="warning" v-else>{{ scope.row.type }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="state"
                         label="余额状态">
          <template slot-scope="scope">
            <el-tag size="mini" v-if="scope.row.state_id === '1'">{{ scope.row.state }}</el-tag>
            <el-tag size="mini" type="danger" v-else>{{ scope.row.state }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="centent"
                         label="交易内容">
        </el-table-column>
        <el-table-column prop="target_id"
                         label="交易目标账号ID">
        </el-table-column>
        <el-table-column prop="target_username"
                         label="交易目标昵称">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import {
  getProjectList,
  updateProjectSelected,
  updateProjectHot,
  delProject,
} from '@/api/projectList'
export default {
  name: 'ProjectList',
  computed: {},
  data() {
    return {
      tableData3: [
        {
          id: 1,
          user_id: '1',
          username: 'admin',
          type: '账户充值',
          type_id: '1',
          centent: '向 id: 1,username: admin 账户充值 100 元',
          state: '+100',
          state_id: '1',
          target_id: '1',
          target_username: 'admin',
        },
        {
          id: 2,
          user_id: '20',
          username: 'Super_Admin',
          type: '项目购买',
          type_id: '2',
          centent: '购买项目 id: 1, 向账号 id: 1 支付 0 元',
          state: '-0',
          state_id: '2',
          target_id: '1',
          target_username: 'admin',
        },
        {
          id: 3,
          user_id: '1',
          username: 'admin',
          type: '发布委托',
          type_id: '3',
          centent: '发布委托 id: 1, 向系统支付 10 元',
          state: '-10',
          state_id: '2',
          target_id: '20',
          target_username: 'Super_Admin',
        },
      ],
      projectSelected: '0',
      projectHot: '0',
    }
  },
  methods: {
    // 获取项目信息
    getProjectInfo: function () {
      return getProjectList().then((res) => {
        this.tableData3.splice(0, this.tableData3.length)
        this.tableData3.push(...res.data.rows)
      })
    },
    // 根据项目文件地址下载项目文件
    handleDownloadProject: function (url) {
      console.log('download', JSON.parse(url))
    },
    // 项目设置按钮，初始化内部所需参数
    handleSetting: function (info) {
      let selected = info.selected.toString()
      let hot = info.hot.toString()
      this.projectSelected = selected
      this.projectHot = hot
    },
    // 删除项目
    handleDelete: function (id) {
      console.log('删除')
      delProject({ id: id }).then((res) => {
        if (res.data.status === 200) {
          this.$message({
            showClose: true,
            message: res.data.data,
            type: 'success',
          }),
            this.getProjectInfo()
        }
      })
    },
    // 项目精选开关
    handleChangeSelected: function (projectId) {
      updateProjectSelected({
        pro_id: projectId,
        selected: this.projectSelected,
      }).then((res) => {
        if (res.data.status == 200) {
          this.$message({
            showClose: true,
            message: res.data.data,
            type: 'success',
          }),
            this.getProjectInfo()
        } else {
          this.$message({
            showClose: true,
            message: res.data.data,
            type: 'warning',
          })
        }
      })
    },
    // 项目热门开关
    handleChangeHot: function (projectId) {
      updateProjectHot({
        pro_id: projectId,
        hot: this.projectHot,
      }).then((res) => {
        if (res.data.status == 200) {
          this.$message({
            showClose: true,
            message: res.data.data,
            type: 'success',
          }),
            this.getProjectInfo()
        } else {
          this.$message({
            showClose: true,
            message: res.data.data,
            type: 'warning',
          })
        }
      })
    },
  },
  // beforeMount() {
  //   this.getProjectInfo()
  // },
}
</script>

<style lang="scss"></style>